<!--已经审批需求页面-->
<template>
    <div>
        <!-- 头部搜索板块 -->
        <div style="margin-top: 20px;">
            <p style="display: inline-block; padding-left: 20px;">需求名：</p>
            <el-input v-model="nameWord" placeholder="请输入需求名称" style="width: 300px;" clearable />
            <p style="display: inline-block; padding-left: 20px;">部门名称：</p>
            <el-select v-model="deptName" placeholder="请选择部门" style="margin-left: 6px; margin-right: 6px;">
                <el-option v-for="item in deptNames" :key="item" :label="item" :value="item" />
            </el-select>
            <el-button style="margin-left: 15px;" type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
        </div>
        <!-- 中间表格板块 -->
        <div style="margin-top: 20px;">
            <template>
                <el-table border stripe :data="approvePassData" style="width: 100%; margin: 1% 10px;">
                    <el-table-column prop="id" label="需求编号" width="80" />
                    <el-table-column prop="demandName" label="需求名称" />
                    <el-table-column prop="realName" label="申请人" width="90" />
                    <el-table-column prop="deptName" label="申请部门" width="175" />
                    <el-table-column prop="deptApprover" label="部门审批人" />
                    <el-table-column prop="isPass" label="终审状态">
                        <template slot-scope="scope">
                            <span v-html="passStatus(scope.row.isPass)" />
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="操作">
                        <template slot-scope="scope">
                            <el-button size="mini" type="text" @click="openDetails(scope.row)">查看详情</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div style="display: flex; justify-content: flex-end; margin-top: 20px;">
                    <el-pagination background layout="sizes, prev, pager, next,jumper, ->, total" :total="total" @current-change="currentChange" @size-change="sizeChange" />
                </div>
            </template>
        </div>
    </div>
</template>

<script>

export default {
    data() {
        return {
            nameWord: '',
            approvePassData: [],
            deptName: '',
            deptNames: [],
            total: 0,
            page: 1,
            size: 10
        }
    },
    mounted() {
        this.initApprovePassData()
        this.initDeptName()
    },
    methods: {
        passStatus(cellValue) { // 终审状态
            if (cellValue === 1 || cellValue === '1') {
                return ('<span style="color: green">已通过</span>')
            }
            if (cellValue === 0 || cellValue === '0') {
                return ('<span style="color: red">已驳回</span>')
            }
        },
        openDetails(data) { // 点击跳转详情页面
            this.$router.push({path: '/approve_pass/details', query: data})
        },
        sizeChange(size) { // 分页页数
            this.size = size
            this.handleQuery()
        },
        currentChange(currentPage) { // 分页当前页触发
            this.page = currentPage
            this.handleQuery()
        },
        handleQuery() { // 搜索功能
            var param = {nameWord: this.nameWord, deptName: this.deptName, page: this.page, size: this.size}
            this.getRequest('/sys/approve/demand/super/approved', param).then(resp => {
                if (resp.status === 200) {
                    this.approvePassData = resp.data.data
                }
            })
        },
        initApprovePassData() { // 初始获取已审批需求信息表格
            this.getRequest('/sys/approve/demand/super/approved').then(resp => {
                if (resp) {
                    this.approvePassData = resp.data.data
                    this.total = resp.data.total
                }
            })
        },
        initDeptName() { // 初始获取部门下拉框选择信息
            this.getRequest('/system/cfg/dept/getDeptName').then(resp => {
                if (resp) {
                    this.deptNames = resp.data
                }
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.el-button--close {
    background-color: #66b1ff;
    color: #fff;
}
</style>
